<template>
 <div>
     <!-- 头部返回 -->
    <div class="header">
      <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="$router.go(-1)"/>
    </div>
   <div class="register">
    <van-form @submit="onSubmit">
    <van-cell-group inset>
    <van-field
      v-model="pwd"
      name="pwd"
      label="密码"
      placeholder="至少6位包含数字、大写字母、特殊字符"
      :rules="[{ validator, message: '请正确填写格式' }]"
      @input="changedis"/>
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" :disabled="isdisable">
      完成
    </van-button>
  </div>
</van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Dialog } from 'vant';
import {useRouter}from "vue-router"
import {useuserstore} from "../../store/userstore"
import{ref,reactive,} from 'vue'
// 引入注册接口
import{registfn} from "../../api/user"
// 引用pinia中的方法
const userstore =useuserstore()
let {tel}=userstore
// 引入路由方法
let router =useRouter()
const validator = (val:any) =>/^(?!([a-zA-Z\d]*|[\d!@#\$%_\.]*|[a-zA-Z!@#\$%_\.]*)$)[a-zA-Z\d!@#\$%_\.]{6,16}$/.test(val);
// 注册密码
const pwd=ref("")
const isdisable=ref(true)
let changedis=()=>{
  if(validator(pwd.value)){
    isdisable.value=false
  }else{
    isdisable.value=true
  }
}
interface cc{
    tel:string,
    password:string
}
let onSubmit=()=>{
  const value1:cc={
   tel:tel,
   password:pwd.value
  }
  registfn(value1).then((res:any)=>{
    console.log(res);
    if(res.code==200){
      Dialog.alert({
      title: '提示',
      message:`注册成功,跳转登录页`,
       }).then(() => {
       userstore.changepwd(pwd.value)
        router.push("/login")
      })
    }
  })
}
</script>
<style scoped>

</style>